<template>
  <BgDrawer :drawer="drawer" @close="close">
    <MyTitle title="设备布置图"></MyTitle>
    <div class="bg_drawer_tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="工艺参数监控" name="工艺参数监控">
          <Parameter :key="activeName"></Parameter>
        </el-tab-pane>
        <el-tab-pane label="设备状态监控" name="设备状态监控">
          <State :key="activeName"></State
        ></el-tab-pane>
        <el-tab-pane label="任务信息监控" name="任务信息监控"
          ><Information :key="activeName"></Information
        ></el-tab-pane>
      </el-tabs>
    </div>
  </BgDrawer>
</template>

<script>
import Parameter from "./arrangementComponents/Parameter.vue";
import State from "./arrangementComponents/State.vue";
import Information from "./arrangementComponents/Information.vue";
import BgDrawer from "./BgDrawer.vue";
import MyTitle from "./DTitle.vue";
export default {
  components: {
    Parameter,
    State,
    Information,
    MyTitle,
    BgDrawer,
  },
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeName: "工艺参数监控",
    };
  },
  methods: {
    close() {
      this.$emit("update:drawer", false);
    },
    handleClick() {},
  },
};
</script>

<style lang='scss' scoped>
.bg_drawer_tabs {
  margin-top: 20px;

  /deep/ {
    .el-tabs__nav-wrap::after {
      background-color: #00e0fb;
    }
    .el-tabs__active-bar {
      display: none;
    }
    .el-tabs__item {
      color: #00e0fb;
      padding: 0 8px !important;
      height: 30px;
      line-height: 30px;
    }
    .is-active {
      background-color: #00e0fb;
      color: #000949;
    }
  }
}
</style>